.index {
	// 主体
	.main {
		section {
			margin: 10px 20px;
		}

		// 排名+打卡
		.main1 {
			display: flex;
			height: 100px;

			.rank {
				position: relative;
				width: 1px;
				flex-grow: 1;
				background: #54afda;
				padding-left: 10px;
				padding-top: 10px;
				margin-right: 15px;
				border-radius: 15px;
				#rankNum {
					color: #fff;
					font-size: 30px;
					position: absolute;
					right: 20px;
					bottom: 20px;
				}
				.tp {
					font-weight: bold;
					background: url(../../assets/images/index-card-rank.png) no-repeat;
					background-size: cover;
					height: 70px;
					width: 70px;
				}
			}

			.clockin {
				position: relative;
				width: 1px;
				flex-grow: 2;
				background: #7bcbf5;
				border-radius: 15px;
				padding-left: 10px;
				padding-top: 5px;
				font-weight: bold;
				.tp1 {
					background: url(../../assets/images/index-card-sum.png) no-repeat
						center/cover;
					height: 90px;
					width: 102px;
				}
			}

			#clockBtn {
				position: absolute;
				right: 20px;
				bottom: 20px;
				height: 30px;
				color: #fff;
				background: #0a0;
				border-radius: 20px;
				border: 1px solid #000;
			}
		}

		//运动数据+徽章
		.main2 {
			display: flex;
			height: 100px;

			.sports-data {
				width: 1px;
				flex-grow: 1;
				background: url(../../assets/images/index-card-data.png) no-repeat
					center center/cover;
				border-radius: 15px;
				margin-right: 15px;
				color: #fff;
				text-indent: 1em;
				line-height: 2em;
			}

			.badge {
				position: relative;
				width: 1px;
				flex-grow: 1;
				border-radius: 15px;
				background: #9dbde3;
				padding-left: 10px;
				padding-top: 5px;
				font-weight: bold;
				.tp2 {
					background: url(../../assets/images/index-card-badge.png) no-repeat
						center/cover;
					height: 90px;
					width: 97px;
				}
				#badgeNum {
					position: absolute;
					bottom: 15px;
					right: 40px;
					font-size: 35px;
					color: #004e73;
				}
				.mei {
					position: absolute;
					bottom: 22px;
					right: 15px;
					font-size: 15px;
					color: #004e73;
				}
			}
		}

		.main3 {
			background: url(../../assets/images/index-swiper-bg2.jpg) no-repeat center
				center;
			background-size: cover;
			height: 100px;
			border-radius: 15px;
			color: #fff;
			text-indent: 1em;
			line-height: 2em;

			a {
				color: #fff;
			}
		}

		.main4 {
			background: url(../../assets/images/index-card-run.png) no-repeat center
				center;
			background-size: cover;
			height: 100px;
			border-radius: 15px;
			text-indent: 1em;
			line-height: 2em;

			a {
				color: #fff;
			}
		}
	}

	// 横幅轮播图
	.swiper {
		width: 100%;
		height: 200px;
		background: #f00;

		.slider1 {
			background: url(../../assets/images/course-img02.png) no-repeat center
				center;
			background-size: cover;
		}

		.slider2 {
			background: url(../../assets/images/course-img03.jpg) no-repeat center
				center;
			background-size: cover;
		}

		.slider3 {
			background: url(../../assets/images/course-img04.jpg) no-repeat center
				center;
			background-size: cover;
		}
	}
}
